<template>
  <div class="app-container">
    <!-- 题 -->
    <el-row>
      <el-col :span="12">
        <h3>{{ idx + 1 }}、{{ form.title }}</h3>
        <div v-for="(item, index) in form.options" :key="index" class="xx">
          <el-checkbox
            :label="item.index"
            v-model="form.userAnswer"
          ></el-checkbox
          >&nbsp;
          <div>{{ item.value }}</div>
        </div>
        正确答案：{{ form.answers }}---- 我的答案 {{ form.userAnswer }}
      </el-col>
      <el-col :span="12">
        <ul class="tiidx">
          <li
            ref="lis"
            v-for="(v, i) in testList"
            :key="i"
            :class="{ nowIdx: i == idx, 'li-disabled': i > idx }"
            @click="liClk(i)"
          >
            {{ i + 1 }}
          </li>
        </ul>
        <!-- 时间进度条 -->
        <div class="svg-wrapper">
          <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" class="circle-one" />
            <circle
              cx="50"
              cy="50"
              r="40"
              class="circle-two"
              stroke="#1890ff"
              stroke-dasharray="251"
              :stroke-dashoffset="timePercent"
            />
          </svg>
          <div class="circle-text">{{ time }}</div>
        </div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-button-group>
      <el-button
        type="primary"
        icon="el-icon-arrow-left"
        v-if="idx > 0"
        @click="beforeIdx"
      >
        上一页
      </el-button>
      <el-button type="primary" @click="nextIdx">
        {{ idx == testList.length - 1 ? "提交" : "下一页" }}
        <i
          class="el-icon-arrow-right el-icon--right"
          v-if="idx != testList.length - 1"
        >
        </i>
      </el-button>
    </el-button-group>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      idx: 0,
      resultObj: {
        rightArr: [],
        wrongArr: [],
      },
      minutes: null,
      time: "",
      allTimes: null,
    };
  },
  async created() {
    await this.getFiftyQuestions();
    this.minutes = this.testList.length * 1;
    this.allTimes = this.minutes * 60;
    this.runTime();
  },
  methods: {
    ...mapActions("exam", ["getFiftyQuestions"]),
    // 下一题
    nextIdx() {
      if (this.idx == this.testList.length - 1) {
        console.log("提交");
        return;
      }
      // 点击下一题 未选择答案
      if (!this.form.userAnswer.length) {
        this.$message({
          message: "您还没有选择，请选择您的答案!!!",
          type: "warning",
        });
        return;
      }

      this.doQuestion();
      this.idx++;
      console.log(this.resultObj);
    },
    // 上一题
    beforeIdx() {
      let hasStyle = this.$refs.lis[this.idx].style;
      this.idx--;
      //   this.$refs.lis[this.idx].style = "background: #1890ff";
      //   this.$refs.lis[this.idx + 1].style = hasStyle;
      this.doQuestion();
    },
    // 错误的
    wrongFn() {
      this.$refs.lis[this.idx].style = "background: rgb(245, 108, 108)";
      let obj = { ...this.testList[this.idx] };
      this.resultObj.wrongArr.push(obj);
    },
    // 正确的
    rightFn() {
      this.$refs.lis[this.idx].style = "background: rgb(103, 194, 58)";
      this.resultObj.rightArr.push(this.testList[this.idx]);
    },
    liClk(i) {
      if (i > this.idx) return;
      this.idx = i;
    },
    // 做题 对 || 错
    doQuestion() {
      let answersArr = this.form.answers;
      if (this.form.userAnswer.length != answersArr.length) {
        this.wrongFn();
      } else {
        let arr = this.form.userAnswer.filter((v) => {
          return answersArr.indexOf(v) < 0;
        }); //arr 为存在错误的项的数组
        if (arr.length) {
          this.wrongFn();
        } else {
          this.rightFn();
        }
      }
    },
    // 时间
    runTime() {
      let timer = setInterval(() => {
        --this.allTimes;
        this.handleTime(this.allTimes);

        if (this.allTimes <= 0) {
          clearInterval(timer);
          timer = null;
          console.log("时间到！！！");
        }
      }, 1000);
    },
    handleTime(zsj) {
      let m = Math.floor(zsj / 60);
      let s = Math.floor(zsj % 60);
      this.time = `${this.fillNum(m)}：${this.fillNum(s)}`;
    },
    fillNum(num) {
      return num > 10 ? num : "0" + num;
    },
  },
  computed: {
    ...mapState("exam", ["testList"]),
    form() {
      let obj = this.testList[this.idx];
      if (!obj || !obj.id) return;
      return obj;
    },
    timePercent() {
      return 251 * (this.allTimes / (this.minutes * 60));
    },
  },
};
</script>

<style scoped>
.xx {
  display: flex;
  margin-top: 10px;
}

.xx > div {
  margin-left: 10px;
}

.tiidx {
  list-style: none;
}

.tiidx > li {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 8px;
  margin: 5px;
  float: left;
  color: #ffffff;
}

.li {
  cursor: pointer;
  background-color: cadetblue;
}

.nowIdx {
  cursor: pointer;
  background-color: #1890ff;
}

.li-disabled {
  cursor: not-allowed;
  background-color: cadetblue;
}
</style>

<style scoped>
.svg-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
  text-align: center;
}

.svg-wrapper svg {
  transform: rotate(-87deg);
}

.circle-one {
  fill: none;
  stroke: rgb(231, 214, 214);
  stroke-width: 8;
}

.circle-two {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  margin-left: 50%;
}

.circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
  color: firebrick;
  font-size: 15px;
  font-weight: 600;
}
</style>